<template>
  <!-- <el-carousel class="viewpaper-total" :interval="4000" type="card"  >
    <el-carousel-item class="viewpaper-lunbo" v-for="(option,index) in items" :key="index">
      <el-image class="viewpaper" :src="option.src"></el-image>
    </el-carousel-item>
  </el-carousel> -->
  <div>
    <el-carousel autoplay :interval="5000" arrow="hover" class="viewpaper-tatal" :height="height">
      <el-carousel-item class="viewpaper-lunbo " v-for="(option,index) in getBanners" :key="index">
        <el-image class="viewpaper" :src="option.src"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        height:130+'px',
        items:[
          /*{ src:"https://www.huashine.net/uploads/211124/1-21112409395c09.jpg"},
          { src:"https://www.huashine.net/uploads/211124/1-21112409395c09.jpg"},
          { src:"https://www.huashine.net/uploads/211124/1-21112409395c09.jpg"},
          { src:"https://www.huashine.net/uploads/211124/1-21112409395c09.jpg"},*/
        ]
      }
    },
    methods:{
    },
      mounted() {
          var w = window.innerWidth
          var h = 750
          h = w/4.7
          this.height=h+'px';
          let that = this;
          window.onresize = function windowResize() {
            // 通过捕获系统的onresize事件触发我们需要执行的事件
            var w = window.innerWidth
            var h = 750
            if (w > 1180) {
              h = 750
            } else {
              h = w/4.7
            }
            that.height=h+'px'
          }
      },
      computed:{
          getBanners(){
              return this.$store.state.tab.banners;
          }
      }

  }
</script>
<style scoped>
  .viewpaper-tatal{
    width: 100%;
    height: auto ;
    padding: 0;
    margin: 0;
  }
  .viewpaper-lunbo{
    width: 100%;
    height: auto;

  }
  .viewpaper{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
    .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
